<!-- eslint-disable no-irregular-whitespace -->
<template>
    <div id="monitor-display">
        <div class="header">
            <h1>
                风 险 驾 驶 舱
                <span>
                    <b ref="nowdate">　</b>
                    <i class="upload" @click="visible = true"></i>
                </span>
            </h1>
            <h2>C　M　A　招　商　资　管</h2>
        </div>

        <div class="main">
            <el-row class="row-1">
                <el-col :span="6">
                    <el-card>
                        <PieChart ref="PieChart" style="height: 100%" :data="pieData" />
                    </el-card>
                </el-col>
                <el-col :span="6" :offset="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">超限情况</div>
                        </div>
                        <BarChart ref="BarChart" :data="barData" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
            </el-row>

            <div class="abs abs-1">
                <div class="content">
                    <span class="num">{{ numMsg.productScale || 0 }}亿元</span>
                    <br />
                    <span>产品规模</span>
                </div>
                <div class="line-1"></div>
            </div>
            <div class="abs abs-2">
                <div class="content">
                    <span class="num">{{ numMsg.productCount || 0 }}个</span>
                    <br />
                    <span>产品总数</span>
                </div>
                <div class="line-2"></div>
            </div>
            <div class="abs abs-3">
                <div class="content">
                    <span class="num">{{ numMsg.termTotalCount || 0 }}条</span>
                    <br />
                    <span>条款总数</span>
                    <br />
                    <div class="box">
                        <span style="font-size: 18px; color: var(--primary)">
                            {{ numMsg.supportCount || 0 }}条
                            <b>({{ numMsg.percent }}%)</b>
                        </span>
                        <br />
                        <span>事后系统支持</span>
                    </div>
                    <div class="box">
                        <span style="font-size: 18px; color: var(--primary)">
                            {{ numMsg.tradeSupportCount || 0 }}条
                            <b>({{ numMsg.percent2 }}%)</b>
                        </span>
                        <br />
                        <span>交易系统支持</span>
                    </div>
                </div>
                <div class="line-3"></div>
            </div>
            <div class="abs abs-4">
                <div class="content">
                    <span class="num">{{ numMsg.resultCount }}条</span>
                    <br />
                    <span>超限总数</span>
                </div>
                <div class="line-4"></div>
            </div>
            <el-row class="row-2">
                <el-col :span="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">天添利-期限监控</div>
                        </div>
                        <LineChart ref="LineChart1" :data="TTL1" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">天添利-杠杆率监控</div>
                        </div>
                        <LineChart ref="LineChart2" :data="TTL2" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="row-3">
                <el-col :span="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">公募现金比例监控</div>
                        </div>
                        <LineChart2 ref="LineChart3" :data="GM1" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">公募杠杆率监控</div>
                        </div>
                        <LineChart2 ref="LineChart4" :data="GM2" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="row-4">
                <el-col :span="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">系统-条款支持率</div>
                        </div>
                        <LineChart3 ref="LineChart5" :data="XT" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div class="border-box">
                            <img :src="imgurl" alt="" />
                            <div class="title">公私募-条款支持率</div>
                        </div>
                        <LineChart4 ref="LineChart6" :data="GSM" style="height: calc(100% - 50px)" />
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <ExportDialog v-if="visible" :visible.sync="visible" />
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import PieChart from './monitor-display/pie-chart.vue';
import BarChart from './monitor-display/bar-chart.vue';
import LineChart from './monitor-display/line-chart.vue';
import LineChart2 from './monitor-display/line-chart2.vue';
import LineChart3 from './monitor-display/line-chart3.vue';
import LineChart4 from './monitor-display/line-chart4.vue';
import ExportDialog from './monitor-display/export-dialog.vue';
import img1 from '../../images/icon-title.png';
import XEUtils from 'xe-utils';
import { numberFormat } from '@/utils/tools';

@Component({
    name: 'MonitorDisplay',
    components: { PieChart, BarChart, LineChart, LineChart2, LineChart3, LineChart4, img1, ExportDialog },
})
export default class MonitorDisplay extends Vue {
    imgurl = img1;

    pieData: any[] = [
        // { value: 1, name: '超3天未反馈' },
        // { value: 2, name: '80%调整期' },
        // { value: 70, name: '距调整期2日' },
    ];

    barData: any[] = [
        // { product: '一季度', 重点指标: 222, '80%调整期': 4500 },
        // { product: '二季度', 重点指标: 120, '80%调整期': 300 },
        // { product: '三季度', 重点指标: 228, '80%调整期': 1130 },
        // { product: '四季度', 重点指标: 120, '80%调整期': 300 },
    ];

    numMsg: any = {
        productCount: '0', // 产品总数
        productScale: '0', // 产品规模
        termTotalCount: '0', // 条款总数
        supportCount: '0', // 事后系统支持数
        tradeSupportCount: '0', // 交易系统支持数
        resultCount: '0', // 超限总数
        percent: '0',
        percent2: '0',
    };

    TTL1: any = {
        // xAxisData: [
        //     '2023年1月1日',
        //     '2023年1月2日',
        //     '2023年1月3日',
        //     '2023年1月4日',
        //     '2023年1月5日',
        //     '2023年2月1日',
        //     '2023年2月2日',
        //     '2023年2月3日',
        //     '2023年2月4日',
        //     '2023年2月5日',
        //     '2023年3月1日',
        //     '2023年3月2日',
        //     '2023年3月3日',
        //     '2023年3月4日',
        //     '2023年3月5日',
        //     '2023年4月1日',
        // ],
        // data: [30, 40, 20, 90, 50, 80, 60, 70, 30, 40, 50, 20, 80, 60, 70, 67],
        // unit: '剩余期限(天数)',
        // color: '#3c7786',
        // areaStyle: ['rgba(60, 119, 134,0.45)', 'rgba(60, 119, 134,0)'],
    };

    TTL2: any = {
        // xAxisData: [
        //     '2023年1月1日',
        //     '2023年1月2日',
        //     '2023年1月3日',
        //     '2023年1月4日',
        //     '2023年1月5日',
        //     '2023年2月1日',
        //     '2023年2月2日',
        //     '2023年2月3日',
        //     '2023年2月4日',
        //     '2023年2月5日',
        //     '2023年3月1日',
        //     '2023年3月2日',
        //     '2023年3月3日',
        //     '2023年3月4日',
        //     '2023年3月5日',
        //     '2023年4月1日',
        // ],
        // data: [130, 140, 140, 130, 150, 80, 60, 70, 90, 40, 50, 120, 80, 60, 70, 67],
        // unit: '比值',
        // color: '#feb580',
        // areaStyle: ['rgba(254, 181, 128,0.45)', 'rgba(254, 181, 128,0)'],
    };

    GM1: any = {
        // xAxisData: [
        //     '2023年1月1日',
        //     '2023年1月2日',
        //     '2023年1月3日',
        //     '2023年1月4日',
        //     '2023年1月5日',
        //     '2023年2月1日',
        //     '2023年2月2日',
        //     '2023年2月3日',
        //     '2023年2月4日',
        //     '2023年2月5日',
        //     '2023年3月1日',
        //     '2023年3月2日',
        //     '2023年3月3日',
        //     '2023年3月4日',
        //     '2023年3月5日',
        //     '2023年4月1日',
        // ],
        // data: [
        //     {
        //         name: '核心优势',
        //         type: 'line',
        //         lineStyle: { color: '#3c7786' },
        //         data: [2, 1, 1.5, 2, 2.1, 2, 1.9, 2, 1, 1.5, 2, 2.1, 2, 1.9, 1, 2],
        //     },
        //     {
        //         name: '智远填利',
        //         type: 'line',
        //         lineStyle: { color: '#99c39c' },
        //         data: [1, 2, 1.5, 1, 1.1, 1, 2.9, 1, 2, 1.5, 2, 2.1, 1, 2.9, 2, 1],
        //     },
        //     {
        //         name: '天添利',
        //         type: 'line',
        //         lineStyle: { color: '#feb580' },
        //         data: [1.5, 2.1, 1.5, 1.2, 1.3, 1.5, 2.9, 1.1, 2.8, 1.5, 2.7, 2.6, 1, 2.9, 2.1, 2.1],
        //     },
        //     {
        //         name: '睿丰三个月',
        //         type: 'line',
        //         lineStyle: { color: '#856e8a' },
        //         data: [1.7, 2.3, 1.7, 1.4, 1.5, 1.7, 3.1, 1.3, 2.8, 1.7, 2.9, 2.8, 1.2, 2.9, 2.3, 2.3],
        //     },
        //     {
        //         name: '增益添彩',
        //         type: 'line',
        //         lineStyle: { color: '#db5476' },
        //         data: [1.3, 2.1, 1.3, 1, 1.1, 1.3, 2.7, 1, 2.5, 1.2, 2.4, 2.4, 1, 2.6, 2.3, 2.3],
        //     },
        //     {
        //         name: '招朝鑫',
        //         type: 'line',
        //         lineStyle: { color: '#9d7f62' },
        //         data: [1.1, 2.1, 1.1, 1.2, 1, 1.1, 2.5, 1.2, 2.3, 1, 2.2, 2.2, 1, 2.4, 2.1, 2.2],
        //     },
        // ],
        // unit: '比值',
    };

    XT: any = {
        // xAxisData: [
        //     '2023年1月1日',
        //     '2023年1月2日',
        //     '2023年1月3日',
        //     '2023年1月4日',
        //     '2023年1月5日',
        //     '2023年2月1日',
        //     '2023年2月2日',
        //     '2023年2月3日',
        //     '2023年2月4日',
        //     '2023年2月5日',
        //     '2023年3月1日',
        //     '2023年3月2日',
        //     '2023年3月3日',
        //     '2023年3月4日',
        //     '2023年3月5日',
        //     '2023年4月1日',
        // ],
        // data: [
        //     {
        //         name: '事后系统',
        //         type: 'line',
        //         lineStyle: { color: '#3c7786' },
        //         data: [
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //         ],
        //     },
        //     {
        //         name: '交易系统',
        //         type: 'line',
        //         lineStyle: { color: '#feb580' },
        //         data: [
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //         ],
        //     },
        // ],
        // unit: '条款支持率',
    };

    GSM: any = {
        // xAxisData: [
        //     '2023年1月1日',
        //     '2023年1月2日',
        //     '2023年1月3日',
        //     '2023年1月4日',
        //     '2023年1月5日',
        //     '2023年2月1日',
        //     '2023年2月2日',
        //     '2023年2月3日',
        //     '2023年2月4日',
        //     '2023年2月5日',
        //     '2023年3月1日',
        //     '2023年3月2日',
        //     '2023年3月3日',
        //     '2023年3月4日',
        //     '2023年3月5日',
        //     '2023年4月1日',
        // ],
        // data: [
        //     {
        //         name: '事后系统-公募',
        //         type: 'line',
        //         lineStyle: { color: '#3c7786' },
        //         data: [
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //         ],
        //     },
        //     {
        //         name: '交易系统-公募',
        //         type: 'line',
        //         lineStyle: { color: '#99c39c' },
        //         data: [
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //         ],
        //     },
        //     {
        //         name: '事后系统-私募',
        //         type: 'line',
        //         lineStyle: { color: '#db5476' },
        //         data: [
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 4, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 6, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 4, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 4, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 6, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //         ],
        //     },
        //     {
        //         name: '交易系统-私募',
        //         type: 'line',
        //         lineStyle: { color: '#feb580' },
        //         data: [
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 4, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3.5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 4, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 1, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 2, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 3.5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //             { value: 5, percent: '0.1%', value2: 2, percent2: '0.1%' },
        //         ],
        //     },
        // ],
        // unit: '条款支持率',
    };

    timer = null;
    visible: boolean = false;

    GM2: any = {};

    funds: any = {
        '880006': '核心优势',
        '880011': '智远增利',
        '880013': '天添利',
        '880009': '睿丰三个月',
        '882118': '增益添彩',
        '880002': '招朝鑫',
    };

    mounted() {
        window.addEventListener('resize', this.screenAdapter);
        this.getNowDateFunc();

        this.getChart();
        this.getChart3();
        this.getChart4();
        this.getChart5();
        this.getChart6();
        this.getChart7();
        this.getChart8();

        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    /**
     * 上面三个是同个接口
     */
    getChart(): void {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/transfiniteView' }).then((res: any) => {
            // 处理左上数据
            res.distribution.forEach(element => {
                element.name = element.itemStatusName;
                element.value = element.itemCount;
            });
            this.pieData = res.distribution;

            // 处理右上数据
            let barData = [];
            let zdzb = res.barChart.series.find(i => i.name === '重点指标');
            let tzq = res.barChart.series.find(i => i.name === '80%调整期');
            for (let i = 0; i < res.barChart.tags.length; i++) {
                let product = res.barChart.tags[i];
                barData.push({
                    product,
                    重点指标: Number(zdzb.data[i]),
                    '80%调整期': Number(tzq.data[i]),
                });
            }

            this.barData = barData;
            console.log(this.barData, ' this.barData ');

            // 处理中间数据
            this.numMsg = res.overall;
            this.numMsg.productScale = numberFormat(this.numMsg.productScale, '元');
            this.numMsg.productCount = numberFormat(this.numMsg.productCount);
            this.numMsg.percent = ((res.overall.supportCount / res.overall.termTotalCount) * 100).toFixed(2) || '0';
            this.numMsg.percent2 = ((res.overall.tradeSupportCount / res.overall.termTotalCount) * 100).toFixed(2) || '0';

            this.numMsg.resultCount = numberFormat(this.numMsg.resultCount);
            this.numMsg.supportCount = numberFormat(this.numMsg.supportCount);
            this.numMsg.termTotalCount = numberFormat(this.numMsg.termTotalCount);
            this.numMsg.tradeSupportCount = numberFormat(this.numMsg.tradeSupportCount);
        });
    }

    /**
     * 折线图
     */
    getChart3() {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/tiantianli/remainDays' }).then((res: any) => {
            this.TTL1 = {
                xAxisData: res.tags,
                data: res.series[0].data,
                unit: '剩余期限(天数)',
                color: '#3c7786',
                areaStyle: ['rgba(60, 119, 134,0.45)', 'rgba(60, 119, 134,0)'],
                xx: this.getFirstDay(res.tags),
            };
        });
    }

    /**
     * 折线图
     */
    getChart4() {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/tiantianli/leverageRatio' }).then((res: any) => {
            this.TTL2 = {
                xAxisData: res.tags,
                data: res.series[0].data,
                unit: '比值',
                color: '#feb580',
                areaStyle: ['rgba(254, 181, 128,0.45)', 'rgba(254, 181, 128,0)'],
                xx: this.getFirstDay(res.tags),
            };
        });
    }

    /**
     * 折线图
     */
    getChart5() {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/cashRatio' }).then((res: any) => {
            let colors = ['#3c7786', '#99c39c', '#feb580', '#856e8a', '#db5476', '#9d7f62'];
            for (let i = 0; i < res.series.length; i++) {
                if (res.series[i].type.indexOf('880006') > -1) {
                    res.series[i].name = this.funds['880006'];
                } else if (res.series[i].type.indexOf('880011') > -1) {
                    res.series[i].name = this.funds['880011'];
                } else if (res.series[i].type.indexOf('880013') > -1) {
                    res.series[i].name = this.funds['880013'];
                } else if (res.series[i].type.indexOf('880009') > -1) {
                    res.series[i].name = this.funds['880009'];
                } else if (res.series[i].type.indexOf('882118') > -1) {
                    res.series[i].name = this.funds['882118'];
                } else if (res.series[i].type.indexOf('880002') > -1) {
                    res.series[i].name = this.funds['880002'];
                }
                res.series[i].lineStyle = colors[i];
                res.series[i].type = 'line';
            }

            this.GM1 = {
                xAxisData: res.tags,
                data: res.series,
                unit: '比值',
                xx: this.getFirstDay(res.tags),
            };
        });
    }

    /**
     * 折线图
     */
    getChart6() {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/leverageRatio' }).then((res: any) => {
            let colors = ['#3c7786', '#99c39c', '#feb580', '#856e8a', '#db5476', '#9d7f62'];
            for (let i = 0; i < res.series.length; i++) {
                if (res.series[i].type.indexOf('880006') > -1) {
                    res.series[i].name = this.funds['880006'];
                } else if (res.series[i].type.indexOf('880011') > -1) {
                    res.series[i].name = this.funds['880011'];
                } else if (res.series[i].type.indexOf('880013') > -1) {
                    res.series[i].name = this.funds['880013'];
                } else if (res.series[i].type.indexOf('880009') > -1) {
                    res.series[i].name = this.funds['880009'];
                } else if (res.series[i].type.indexOf('882118') > -1) {
                    res.series[i].name = this.funds['882118'];
                } else if (res.series[i].type.indexOf('880002') > -1) {
                    res.series[i].name = this.funds['880002'];
                }
                res.series[i].lineStyle = colors[i];
                res.series[i].type = 'line';
            }

            this.GM2 = {
                xAxisData: res.tags,
                data: res.series,
                unit: '比值',
                xx: this.getFirstDay(res.tags),
            };
        });
    }

    /**
     * 折线图
     */
    getChart7() {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/systemRate' }).then((res: any) => {
            const colors = ['#3c7786', '#feb580'];
            if (res && res.series.length) {
                res.series.forEach((e, i) => {
                    e.type = 'line';
                    e.lineStyle = { color: colors[i] };
                    for (let jj = 0; jj < e.dataList.length; jj++) {
                        const element = e.dataList[jj];
                        element.value = Number(element.supportedRatio.replace('%', ''));
                    }
                    e.data = e.dataList;
                });
            }
            this.XT = {
                xAxisData: res.tags,
                data: res.series,
                unit: '条款支持率',
            };
        });
    }

    /**
     * 折线图
     */
    getChart8() {
        this.$axios({ method: 'get', url: '/cmschina/cockpit/placement/systemRate' }).then((res: any) => {
            const colors = ['#3c7786', '#99c39c', '#db5476', '#feb580'];

            if (res && res.series.length) {
                res.series.forEach((e, i) => {
                    e.type = 'line';
                    e.lineStyle = { color: colors[i] };
                    for (let jj = 0; jj < e.dataList.length; jj++) {
                        const element = e.dataList[jj];
                        element.value = Number(element.supportedRatio.replace('%', ''));
                    }
                    e.data = e.dataList;
                });
            }
            this.GSM = {
                xAxisData: res.tags,
                data: res.series,
                unit: '条款支持率',
            };
        });
    }

    /**
     * 从数组中获取每个月的第一天
     */
    getFirstDay(arr) {
        let newArr = [];

        // 把 arr 按月切割成12份
        const month1 = arr.filter(i => i.indexOf('01月') > -1)[0];
        const month2 = arr.filter(i => i.indexOf('02月') > -1)[0];
        const month3 = arr.filter(i => i.indexOf('03月') > -1)[0];
        const month4 = arr.filter(i => i.indexOf('04月') > -1)[0];
        const month5 = arr.filter(i => i.indexOf('05月') > -1)[0];
        const month6 = arr.filter(i => i.indexOf('06月') > -1)[0];
        const month7 = arr.filter(i => i.indexOf('07月') > -1)[0];
        const month8 = arr.filter(i => i.indexOf('08月') > -1)[0];
        const month9 = arr.filter(i => i.indexOf('09月') > -1)[0];
        const month10 = arr.filter(i => i.indexOf('10月') > -1)[0];
        const month11 = arr.filter(i => i.indexOf('11月') > -1)[0];

        newArr.push(month1);
        newArr.push(month2);
        newArr.push(month3);
        newArr.push(month4);
        newArr.push(month5);
        newArr.push(month6);
        newArr.push(month7);
        newArr.push(month8);
        newArr.push(month9);
        newArr.push(month10);
        newArr.push(month11);

        if (arr.filter(i => i.indexOf('12月') > -1).length) {
            const month12 = arr.filter(i => i.indexOf('12月') > -1)[0];
            newArr.push(month12);
        }

        return newArr;
    }

    getNowDate() {
        setTimeout(() => {
            this.getNowDateFunc();
        }, 1000);
    }

    getNowDateFunc() {
        this.timer = setInterval(() => {
            (this.$refs.nowdate as any).innerHTML = XEUtils.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss');
        }, 1000);
    }

    screenAdapter() {
        this.$nextTick(() => {
            const ele1 = (this.$refs['PieChart'] as any).chartInstance;
            const ele2 = (this.$refs['BarChart'] as any).chartInstance;
            const ele3 = (this.$refs['LineChart1'] as any).chartInstance;
            const ele4 = (this.$refs['LineChart2'] as any).chartInstance;
            const ele5 = (this.$refs['LineChart3'] as any).chartInstance;
            const ele6 = (this.$refs['LineChart4'] as any).chartInstance;
            const ele7 = (this.$refs['LineChart5'] as any).chartInstance;
            const ele8 = (this.$refs['LineChart6'] as any).chartInstance;
            ele1.resize();
            ele2.resize();
            ele3.resize();
            ele4.resize();
            ele5.resize();
            ele6.resize();
            ele7.resize();
            ele8.resize();
        });
    }
}
</script>
<style lang="scss" scoped>
#monitor-display {
    position: relative;
    width: 100%;
    height: inherit;
    // min-height: 800px;
    min-width: 1300px;
    background-color: #f1f1f9;
    overflow: auto;

    .header {
        background-image: url('../../images/title.png');
        background-position: left top;
        // background-size: 100%;
        background-size: 100% 200px;
        position: absolute;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 110px;

        h1 {
            height: 75px;
            line-height: 75px;
            padding-left: 25px;
            font-size: 2.5em;
            color: var(--primary);

            span {
                float: right;
                padding-right: 25px;
                font-size: 20px;
                i {
                    font-size: 20px;
                    font-weight: bold;
                    margin: 0 10px;
                }
            }

            b {
                font-size: 18px;
            }
        }

        h2 {
            height: 30px;
            line-height: 30px;
            padding-left: 25px;
            font-size: 1.2em;
            color: #aaa8a6;
        }

        .upload {
            display: inline-block;
            vertical-align: text-bottom;
            width: 30px;
            height: 30px;
            background-image: url('../../images/upload.jpg');
            background-size: 100%;
            border: 3px solid var(--primary);
            cursor: pointer;
        }
    }

    .main {
        background-image: url('../../images/bg.jpg');
        // background-size: 1536px 864px;
        background-size: 100%;
        position: absolute;
        top: 75px;
        width: 100%;
        padding: 45px 5px 5px 5px;
        height: calc(100% - 75px);

        .row-1 {
            // height: 400px;
            height: 50%;
            min-height: 350px;
        }

        .row-2,
        .row-3,
        .row-4 {
            height: 45%;
            min-height: 320px;
        }

        .el-col {
            height: 100%;
            .el-card {
                height: 100%;

                /deep/ .el-card__body {
                    height: 100%;
                    padding: 20px 20px 10px 20px;
                }
            }
        }

        .border-box {
            padding-bottom: 10px;
            border-bottom: 1px solid #cfcccc;
            position: relative;

            img {
                display: inline-block;
                width: 25px;
                height: 25px;
                margin-right: 10px;
            }

            .title {
                height: 25px;
                line-height: 25px;
                font-size: 1.2em;
                display: inline-block;
                font-weight: 700;
                vertical-align: top;
            }
        }

        .border-box::before {
            content: ' ';
            display: inline-block;
            width: 40px;
            height: 2px;
            background: var(--primary);
            position: absolute;
            bottom: -1px;
            left: 0;
        }

        .border-box::after {
            content: ' ';
            display: inline-block;
            width: 20px;
            height: 2px;
            background: var(--primary);
            position: absolute;
            bottom: -1px;
            right: 0;
        }
    }

    .abs {
        z-index: 200;
        position: absolute;

        .content {
            margin-top: 10px;
        }

        span {
            color: #333;
            font-weight: bold;
            padding-left: 15px;
        }

        .num {
            color: var(--primary);
            font-size: 26px;
            padding-top: 10px;
        }

        .box {
            display: inline-block;
            width: 140px;
            margin-top: 30px;
            b {
                font-size: 12px;
            }
        }
    }

    .abs-1 {
        top: 6%;
        left: 27.5%;
        width: 324px;
        height: 130px;
        padding: 20px;
        background: url('../../images/01-1.png');
        background-size: 100%;

        .line-1 {
            width: 112px;
            height: 58px;
            background: url('../../images/01-2.png');
            background-size: 100%;
            position: relative;
            top: -27%;
            left: 102%;
        }
    }

    .abs-2 {
        top: 6%;
        left: 62.5%;
        width: 200px;
        height: 130px;
        padding: 20px;
        background: url('../../images/02-1.png');
        background-size: 100%;

        .line-2 {
            width: 99px;
            height: 35px;
            background: url('../../images/02-2.png');
            background-size: 100%;
            position: relative;
            top: -26%;
            left: -65%;
        }
    }

    .abs-3 {
        top: 29%;
        left: 24.5%;
        width: 324px;
        height: 188px;
        padding: 20px;
        background: url('../../images/03-1.png');
        background-size: 100%;

        .line-3 {
            width: 112px;
            height: 58px;
            background: url('../../images/03-2.png');
            background-size: 100%;
            position: relative;
            top: -85%;
            left: 102%;
        }
    }

    .abs-4 {
        top: 38%;
        left: 62.5%;
        width: 200px;
        height: 130px;
        padding: 20px;
        background: url('../../images/02-1.png');
        background-size: 100%;

        .line-4 {
            width: 99px;
            height: 41px;
            background: url('../../images/04-2.png');
            background-size: 100%;
            position: relative;
            top: -60%;
            left: -65%;
        }
    }

    .abs-5 {
        top: 39%;
        left: 36.3%;
        font-size: 20px;
    }
}

/deep/ .el-card {
    background-color: rgba(255, 255, 255, 0.7);
}

.el-col {
    padding: 10px;
}
</style>
